import React, { memo, useCallback, useMemo } from 'react';
import { Button } from 'antd';

import If from '@/components/If';
import { BUTTON } from '@/pages/SalaryManage/SalaryCalculate/constant/recheckButtonConstant';
import TwoColHead from '@/pages/SalaryManage/components/TwoColHead';

import { goToProcessDetail } from '@/pages/SalaryManage/utils/pageNavigateUtil';
import useCheckButton from './useCheckButton';

const HandleWrapper = ({ checkButtonList = [], actionType }) => {
    const getButton = useCallback(buttonCode => (checkButtonList || []).find(item => item.code === buttonCode), [
        checkButtonList
    ]);

    // 是否需要显示按钮
    const needShowButton = useCallback(
        buttonCode => {
            const matchButton = getButton(buttonCode);
            return matchButton && !matchButton.disabled;
        },
        [getButton]
    );

    //  查看审批详情
    const goToSubmitDetail = () => {
        const submitButton = getButton(BUTTON.FN_SUBMIT_DETAIL)
        goToProcessDetail(submitButton.butQueryParamVO);
    }
    // 过滤掉查看详情
    const checkFilterButtonList = useMemo(
        () => checkButtonList.filter(item => item.code !== BUTTON.FN_SUBMIT_DETAIL),
     [checkButtonList])
    const { render: buttonRender } = useCheckButton(checkFilterButtonList, actionType)

    return (
        <>
            <TwoColHead
                style={{ margin: 0, width: '100%' }}
                left={
                    buttonRender()
                }
                right={
                    <If condition={needShowButton(BUTTON.FN_SUBMIT_DETAIL)}>
                        <Button type="link" onClick={goToSubmitDetail} style={{ padding: 0 }}>
                            查看审批详情
                        </Button>
                    </If>

                }
                addMarginInRightChild={false}
            />
        </>
    );
};

export default memo(HandleWrapper)
